<script lang="ts" setup>
import { ElPagination } from 'element-plus'

defineProps({
    total: {
        type: Number,
        default: 0,
    },
    layout: {
        type: String,
        default: '->, total, prev, pager, next, sizes, jumper',
    },
    pageSizes: {
        type: Array as PropType<number[]>,
        default: () => [10, 20, 30, 40, 50],
    },
})

const currentPage = defineModel<number>('currentPage')
const pageSize = defineModel<number>('pageSize')
</script>
<template>
    <ElPagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        :layout="layout"
        v-bind="$attrs"
        class="screen-pagination"
    />
</template>